<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="apple-touch-icon" href="favicon.ico">
<link rel="apple-touch-icon-precomposed" href="favicon.ico">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<title>S银遇-APP下载</title>
<style type="text/css">
	body{
		margin: 0;
	    padding: 0;
	    height: 100%;
	    color: #a9b1b3;
	    font-size: 14px;
	    background-color: #fff;
	    -webkit-font-smoothing: antialiased;
	}
	*{
	    box-sizing: border-box;
	}
	.pattern {
	    position: absolute;
	    top: 0;
	    z-index: 1;
	    max-width: 312px;
	    width: 18%;
	    transition: all .5s;
	}
	.pattern.left {
	    left: 0;
	}
	.pattern.right {
	    right: 0;
	}
	.pattern img {
	    width: 100%;
	    transition: all 1s;
	    pointer-events: none;
	}
	.main{
		text-align: center;
		top: 50%;
	    left: 50%;
	    transform: translate(-50%, -50%);
	    position: absolute;
	}
	.icon img{	    
	    width: 120px;
	    height: 120px;
	    display: inline-block;
	}
	.btn{		
		display: inline-block;
	    padding: 12px 46px;
	    border: 1px solid #32b2a7;
	    border-radius: 40px;
	    font-size: 14px;
	    background: #32b2a7;
	    color: #fff;
	    display: none;
	    text-decoration: none;
	    transition: all .25s;
	}
	@keyframes rotate {
		0% {
			transform: rotate(0)
		}

		100% {
			transform: rotate(360deg)
		}
	}
	.btn.loading{		
		animation: rotate .6s linear infinite;
    	background: 0 0;
	}	
	.type{
		border-bottom: 1px solid #dae2e3;
		display: inline-block;
		width: 100%;
		padding: 25px 0;
		margin-bottom: 15px;
	}
	.type span{
		display: inline-block;
		vertical-align: middle;
		width: 31px;
		height: 28px;
		background: url('type.jpg') no-repeat;
		background-size: 64px 28px;
	}
	.type span.android,.type span.android_web{
		background-position: -33px 0;
	}
	.type span.ios,.type span.ios_web{
		background-position: 0 0;
	}
	.type i{
		display: inline-block;
		vertical-align: middle;
		font-style: normal;
		font-size: 24px;
		color: #505556;
		padding: 3px 0 0 10px;
	}
	.main p{
		margin: 0;
		padding: 0;
	}
	.descript{
		line-height: 1.3;
		padding: 3px 0!important;
	}
	.btn-box{
		display: none;
		padding: 36px 0 0 0;
		height: 82px;
	}
	.code{
		width: 120px;
		margin-left: 56px;
		display: none!important;

	}
	.warp{
		display: block;
	}
	.web{
		display:none;
	}
	.wechat:before{
		content: '';
		display: block;
		position: absolute;
		right:6px;
		top: -20px;
    	margin-left: 16px;
		width: 0; 
		height: 0;
		border-width: 10px;
		border-style: solid;
		border-color: transparent #32b2a7 transparent transparent;
		transform: rotate(90deg); /*顺时针旋转90°*/
	}
	.wechat{
		display: none;
		position: absolute;
		right:15px;
		top:13px;
		text-align: center;
		background: #32b2a7;
		color: #fff;
		font-size: 14px;
		padding: 8px 10px;
		line-height: 1.3;
		border-radius: 6px;
		z-index: 100;
	}
	@media screen and (min-width: 768px) and (max-width: 5600px) { 
		.warp{
			display: none;
		}
		.code{
			display: inline-block!important;
		}
		.web{
			display: block;
			/*width: 200px;*/
		}
		.web .list{
			width: 48%; display: inline-block;
		}
		.main{
			width: 400px;
		}
		.web .type i{
			display: none;
		}	
	}	
</style>
</head>
<body>
<div class="wechat">请点击右上角<br/>选择“浏览器打开”</div>
<span class="pattern left">
	<img src="left.png">
</span>
<span class="pattern right">
	<img src="right.png">
</span>
<div class="main">	
	<div class="icon">
		<img src="icon.png" alt="" /> <img class="code" src="download.png" alt="" />
	</div>
	<div class="warp">
		<div class="type">
			<span class="android"></span>
			<span class="ios"></span>
			<i>S银遇</i>
		</div>	
		<p class="descript">1.1.8 - 23.97M</p>
		<p class="descript">更新于:2019-02-25 11:45</p>
		<p class="ios">提示：下载成功后，请按 Home 键在桌面查看</p>
		<p class="android">提示：下载开始后，请查看您手机下载进程</p>
		<div class="btn-box">
			<a class="btn android" href="javascript:;">下载安装</a>
			<a class="btn ios" onclick="window.location.href='itms-services:///?action=download-manifest&url=https://download.syinyu.shop/ios.plist'">下载安装</a>
		</div>
	</div>
	<div class="web">
		<div class="list">
			<div class="type">
				<span class="ios_web"></span>
				<i>S银遇</i>
			</div>	
			<p class="descript">1.1.8 - 23.97M</p>
			<p class="descript">更新于:2019-02-25 11:45</p>
		</div>
		<div class="list">
			<div class="type">
				<span class="android_web"></span>
				<i>S银遇</i>
			</div>	
			<p class="descript">1.1.8 - 23.97M</p>
			<p class="descript">更新于:2019-02-25 11:45</p>
		</div>
	</div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
	var browser = {
	    versions: function () {
	        var u = navigator.userAgent, app = navigator.appVersion;
	        return {         //移动终端浏览器版本信息
	            trident: u.indexOf('Trident') > -1, //IE内核
	            presto: u.indexOf('Presto') > -1, //opera内核
	            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
	            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
	            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
	            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
	            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
	            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
	            iPad: u.indexOf('iPad') > -1, //是否iPad
	            webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
	        };
	    }(),
	    language: (navigator.browserLanguage || navigator.language).toLowerCase()
	}
	if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
	        var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
	        if (ua.match(/MicroMessenger/i) == "micromessenger") {
	                //在微信中打开
	                $('.wechat').show();
	                $('.btn-box').hide();
	        }
	        else{
	        	$('.btn-box').show();	        	
	        }
	} else {
	        //否则就是PC浏览器打开
	        $('.btn-box').show();
	}
	var u = navigator.userAgent;
	var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
	var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
	if(isiOS == true){
		$('.ios').css('display','inline-block');
		$('.android').hide();
	}
	else{
		$('.ios').hide();
		$('.android').css('display','inline-block');
	}

	$('.btn-box .android').on('click',function () {
		var src = 'https://download.syinyu.shop/android.apk';
		var iframe = document.createElement('iframe');
		iframe.style.display = 'none';
		iframe.src = "javascript: '<script>location.href=\"" + src + "\"<\/script>'";
		document.getElementsByTagName('body')[0].appendChild(iframe);
	});

	$('.btn-box .btn').on('click',function () {
		$(this).removeClass('loading').addClass('loading');
		$(this).css({"line-height":"1","height":"45px","width":"45px","min-width":"45px","padding":"0","border-top-color":"transparent","border-left-color":"transparent"});
	});
</script>
</body>
</html>